import { useEffect, useCallback, useRef } from "react"

function App() {
  const livePusherRef = useRef(null)

  useEffect(() => {
    const livePusher = new window.TXLivePusher()
    if (livePusherRef.current == null) {
      livePusherRef.current = livePusher
      //初始化参数
      livePusherRef.current.setRenderView('localVideo');
      livePusherRef.current.videoView.muted = true;
      livePusherRef.current.videoView.controls = true;
      console.log('livePusherRef.current', livePusherRef.current);
    }
  }, [])

  const handleCapture = useCallback(() => {
    livePusherRef.current.setProperty('setVideoResolution', { width: 1920, height: 1080 })
    livePusherRef.current.setProperty('setVideoFPS', 30)
    livePusherRef.current.setProperty('setAudioSampleRate', 48000)
    livePusherRef.current.setProperty("setVideoContentHint", "detail")
    livePusherRef.current.startScreenCapture(true)
  }, [])

  const handlePush = useCallback(() => {
    livePusherRef.current.setProperty("setVideoBitrate", 2000)
    livePusherRef.current.setProperty("setAudioBitrate", 128)
    livePusherRef.current.startPush("webrtc://livepush.xqnet.cn/live/1719294178893394000_1832237610639446029?txSecret=d7ef93f41993e97f48ebd526ff224b53&txTime=66DD0536")
  }, [])

  return (
    <div className="App">
      <button style={{ margin: "10px" }} onClick={handleCapture}>
        Capture
      </button>
      <button style={{ margin: "10px" }} onClick={handlePush}>
        Push
      </button>
      <div
        id="localVideo"
        style={{
          width: "100%",
          height: "500px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}></div>
    </div>
  )
}

export default App
